<template>
  <div>
    <div class="userInfo">

      <van-image class="icon" :src="`${userInfo.avatar}`" fit="cover" round />
      <div class="right">
        <div class="userName">{{userInfo.nick_name}}</div>
        <div class="num">个人积分：{{userInfo.growth_coin}}</div>
      </div>
    </div>
    <div class="signBox">
      <div class="Box">
        <div :class="['sign', item.status==2?'NoSign':'']" v-for="(item,index) in weekList" :key="index">
          <div class="dayBox"></div>
          <div class="day">{{item.name}}</div>
          <img class="SignedIn" src="../../assets/img/my/SignedIn.png" v-if="item.status==1" />
          <p :class="item.status==0?'failSign':''" v-if="item.status!=1">+20 </p>
          <img class="signUp" src="../../assets/img/my/signUp.png" v-if="item.status==0" />

        </div>
      </div>
      <div class="bottom">
        <img src="../../assets/img/my/calendar.png" alt="" srcset="">
        <p>你已连续签到<span>{{userInfo.sign_days}}天</span> ，明日签到领20积分</p>
      </div>
      <div class="button">
        <van-button round type="primary" :class="signinfo[signinfo.length-1]?.date==nowdate ?'signIned':''" @click="usersignin">{{signinfo[signinfo.length-1]?.date==nowdate ?'今日已签到':'签到'}}</van-button>
      </div>
    </div>

  </div>

</template>
<script>
import { Toast } from 'vant';

export default {
  data () {
    return {
      userInfo: this.$store.state.userInfo,

      weekList: [
        { name: 'Mon.', status: "", day: '' },
        { name: 'Tue.', status: "", day: '' },
        { name: 'Web.', status: "", day: '' },
        { name: 'Thur.', status: "", day: '' },
        { name: 'Fri.', status: "", day: '' },
        { name: 'Sat.', status: "", day: '' },
        { name: 'Sun.', status: "", day: '' },

      ],
      nowdate: '',
      signinfo: [],
      numerals: ['零', '一', '二', '三', '四', '五', '六', '七'],
      num: 0,
    }
  },
  methods: {
    usersigninfo () {
      this.$axios
        .get(this.$api.usersigninfo, {
          params: {},
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.num = 0
            this.signinfo = res.data.data.signinfo;
            this.nowdate = res.data.data.nowdate;

            this.getTimeWeek()
          }
        });
    },
    getTimeWeek () {
      let now = new Date();
      let nowTime = now.getTime();
      let day = now.getDay() > 0 ? now.getDay() : 7
      let oneDayTime = 24 * 60 * 60 * 1000;

      for (let i = 0; i < 7; i++) {
        let n = oneDayTime * i;
        // 周一
        let MondayTime = nowTime - (day - 1) * oneDayTime + n;
        this.weekList[i].day = this.$moment(MondayTime).format('YYYY-MM-DD')

      }
      this.judge()

    },
    //判断签到状态 0：过去未签到，1：已签到 2：未来未签到  并判断连续签到多少天
    judge () {

      this.weekList.forEach((ele) => {
        const diff3 = this.$moment(ele.day).diff(this.$moment(this.nowdate), 'days')
        console.log(diff3);
        let flag = this.signinfo.some((item) => {
          return ele.day == item?.date
        })
        if (diff3 > 0 || (diff3 == 0 && !flag)) {
          ele.status = 2
        } else if (flag) {
          ele.status = 1
        } else {
          ele.status = 0
        }
      })
    },
    //签到
    usersignin () {
      this.$axios.post(this.$api.usersignin).then(res => {
        if (res.data.code == 1) {

          this.usersigninfo()
          Toast.success(res.data.msg)
        } else {
          // 加载失败时
          Toast.fail(res.data.msg)
        }
      })
    }

  },
  watch: {

  },
  created () {
    this.usersigninfo()


  },
  mounted () {


  },
  computed: {

  },
}
</script>
<style scoped lang="less">
.userInfo {
  height: 145px;
  background: url('../../assets/img/my/bg.png') no-repeat;
  background-position: 100% 100%;
  background-size: cover;
  padding: 24px 16px 0;
  box-sizing: border-box;
  display: flex;
  .right {
    margin-left: 12px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    .num {
      margin-top: 6px;
      font-weight: 400;
      font-size: 12px;
    }
  }
}
.signBox {
  width: 343px;
  height: 310px;
  background: #ffffff;
  opacity: 1;
  border-radius: 10px;
  position: absolute;
  top: 110px;

  left: 50%;
  margin-left: -171.5px;
  box-sizing: border-box;
  padding: 16px;
  padding-left: 6px;
  .Box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .sign {
    width: 70px;
    height: 70px;
    background: rgba(48, 48, 48, 0.3);
    opacity: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-left: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;

    .dayBox {
      position: absolute;
      width: 70px;
      height: 70px;
      background: rgba(48, 48, 48, 0.3);
      opacity: 1;
      border-radius: 22.5px;
      top: -45px;
      left: -30px;
      z-index: 2;
    }
    .day {
      z-index: 3;
      position: absolute;
      top: 3px;
      left: 4px;
      font-size: 12px;
      transform: scale(0.8);
      color: #ffffff;
      font-family: Microsoft YaHei;
    }
    .SignedIn {
      width: 38px;
      height: 32px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10px;
      margin-left: -19px;
    }
    p {
      margin: 0;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f9c254;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10px;
      margin-left: -19px;
      z-index: 0;
    }
    .signUp {
      position: relative;
      z-index: 3;
      height: 51px;
    }
  }
  .NoSign {
    background: linear-gradient(146deg, #e55253 0%, #db2a2b 100%);
    .dayBox {
      background: #f9c254;
    }
  }
  .failSign {
    color: #b2b2b2 !important;
  }
}
.bottom {
  margin-top: 21.2px;
  margin-left: 10px;
  display: flex;
  img {
    width: 48px;
    height: 42px;
  }
  p {
    margin: 0;
    margin-left: 14px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 42px;
    color: #303030;
  }
  span {
    color: #db2a2b;
  }
}
.button {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  button {
    width: 148px;
    height: 40px;
    color: #ffffff;
    margin: 0 auto;
  }
}
.signIned {
  background: rgba(48, 48, 48, 0.3);
  color: #f7f8fa;
  border: rgba(48, 48, 48, 0.3) 1px solid;
}
.icon {
  width: 50px;
  height: 50px;
}
</style>
